<template>
	<hx-navbar title="发表评论"> </hx-navbar>
	<view class="order-appraise-container">
		<view v-for="(item, index) in state.list">
			<view class="goods-warp">
				<image :src="item.picUrl" />
				<view class="right">
					<view class="goods-title u-line-2"> {{ item.spuName }} </view>
					<view class="goods-spec" v-if="item.specsInfo"> {{ item.specsInfo }}</view>
				</view>
			</view>
			<view class="u-padding-18" style="display: flex">
				<view class="u-padding-right-10">商品评价</view>
				<u-rate :count="5" v-model="item.goodsScore"></u-rate>
			</view>
			<view class="u-padding-18">
				<u-input v-model="item.content" type="textarea" :border="true" />
			</view>
			<view>
				<hx-upload v-model="item.picUrls" maxCount="6" @onHandler="onUploadHandler($event, index)"></hx-upload>
			</view>
		</view>
		<view class="order-appraise-footer">
			<u-button style="width: 100%" type="primary" shape="circle" @click="onsubmit">确认发表</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getById, orderAppraise } from '@/api/order/orderInfo';
import { reactive, ref } from 'vue';
import HxUpload from '@/components/hx-upload/index.vue';
const loading = ref(true);

const state = reactive<{ list: Array<any> }>({
	list: [],
});
onLoad((options) => {
	getOrder(options?.id);
});

const getOrder = (id: string) => {
	getById(id).then((response) => {
		loading.value = false;
		response.data.orderItemList.forEach((item: any) => {
			state.list.push({
				picUrl: item.picUrl,
				spuName: item.spuName,
				specsInfo: item.specsInfo,
				spuId: item.spuId,
				orderId: item.orderId,
				orderItemId: item.id,
				picUrls: [],
				goodsScore: 5,
				content: '',
			});
		});
	});
};
const onsubmit = () => {
	orderAppraise(state.list[0].orderId, state.list).then((response) => {
		uni.$hxRouter.push({
			type: 'reLaunch',
			url: '/pages/user/appraise/index',
		});
	});
};
const onUploadHandler = (data: any, index: number) => {
	state.list[index].picUrls = data;
};
</script>

<style lang="scss">
.order-appraise-container {
	padding: 20rpx;
	background-color: #fff;
	.goods-warp {
		padding: 20rpx;
		display: flex;

		image {
			width: 160rpx;
			flex: 0 0 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
		}

		.right {
			flex: 1 0 0%;
			height: 100%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.goods-title {
				font-size: 28rpx;
			}

			.goods-spec {
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #909090;
			}
		}
	}
	.order-appraise-footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		width: 100%;
		z-index: 1;
	}
}
</style>
